<template>
  <div class="css-3d">
    <div class="box box-inner">
      <div class="surface-inner surface-inner-1"></div>
      <div class="surface-inner surface-inner-2"></div>
      <div class="surface-inner surface-inner-3"></div>
      <div class="surface-inner surface-inner-4"></div>
      <div class="surface-inner surface-inner-5"></div>
      <div class="surface-inner surface-inner-6"></div>
    </div>
    <div class="box box-out">
      <div class="surface surface-1"></div>
      <div class="surface surface-2"></div>
      <div class="surface surface-3"></div>
      <div class="surface surface-4"></div>
      <div class="surface surface-5"></div>
      <div class="surface surface-6"></div>
    </div>
  </div>
</template>

<style scoped>
.css-3d {
  height: 100vh;
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: rgb(43, 58, 66);
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  margin: auto 0;

  transform-style: preserve-3d;
  /*perspective: 200px;*/
}

.box-out {
  transform: rotateZ(45deg) rotate3d(1, -1, 0, 55deg);

  transform-origin: 50px 50px;

  animation-name: gun;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}

.surface {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgba(141, 214, 249, .3);
  outline: 1px solid #fff;
}

.surface-1 {
  transform: translateZ(100px);
}

.surface-3, .surface-inner-3 {
  transform: rotateY(-90deg);
  transform-origin: left;
}

.surface-4, .surface-inner-4 {
  transform: rotateY(90deg);
  transform-origin: right;
}

.surface-5, .surface-inner-5 {
  transform: rotateX(90deg);
  transform-origin: top;
}

.surface-6, .surface-inner-6 {
  transform: rotateX(-90deg);
  transform-origin: bottom;
}

.box-inner {
  transform: translate3d(25px, 4px, 25px) rotateZ(45deg) rotate3d(1, -1, 0, 55deg);
  transform-origin: 25px 25px;

  animation-name: gun-inner;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}


.surface-inner {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: rgba(141, 214, 249, .2);
  outline: 1px solid #fff;
}

.surface-inner-1 {
  transform: translateZ(50px);
}

@keyframes gun {
  0%, 10% {
    transform: rotateZ(45deg) rotate3d(1, -1, 0, 55deg) rotate3d(0, 0, 1, 0deg);
  }
  100% {
    transform: rotateZ(45deg) rotate3d(1, -1, 0, 55deg) rotate3d(0, 0, 1, -180deg);
  }
}

@keyframes gun-inner {
  0%, 10% {
    transform: translate3d(25px, 4px, 25px) rotateZ(45deg) rotate3d(1, -1, 0, 55deg) rotate3d(0, 0, 1, 0deg);
  }
  100% {
    transform: translate3d(25px, 4px, 25px) rotateZ(45deg) rotate3d(1, -1, 0, 55deg) rotate3d(0, 0, 1, 180deg);
  }
}
</style>
